<template>
    <div class="container clearfix">
        <side-bar :menuList="menus"></side-bar>
        <main-content :breadcrumbTitle="breadcrumbs.title" :breadcrumbs="breadcrumbs.data">
            <div class="container-fluid">
                <slot></slot>
            </div>
        </main-content>
    </div>
</template>

<style scoped>
    .container {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding: 0;
    }

    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
</style>

<script>
    /* eslint-disable no-undef */

    import SideBar from '../common/SideBar.vue';
    import MainContent from '../common/MainContent.vue';

    export default {
        name: 'AdminMain',
        data () {
            return {
                menus: []
            };
        },
        props: {
            breadcrumbs: {type: Object, required: true}
        },
        components: {
            MainContent,
            SideBar
        },
        methods: {
            initMenus () {
                let menus = this.$session.get(this.$key.MENU_DATA);
                axios.get('/web/admin/menu').then((res) => {
                    if (res.data.success === false) {
                        this.$notify.open({
                            type: 'danger',
                            content: JSON.stringify(res.data.data)
                        });
                    } else {
                        this.$session.set(this.$key.MENU_DATA, JSON.stringify(res.data.data));
                        this.menus = res.data.data;
                    }
                });
                this.menus = JSON.parse(menus);
            }
        },
        mounted () {
            this.initMenus();
        }
    };
</script>
